<template>
    <div class="form-box" style="width: 80%">
        <a-form :model="form">
            <div style="margin-top: 24px;"></div>
            <a-typography-title :style="{ fontsize: '1220px' }">发布文章</a-typography-title>

            <a-input v-model="form.title" :style="{ width: '220px' }" default-value="" placeholder="请输入文章标题" />
            <a-divider orientation="left"></a-divider>
            <div class="category-box" style="display: flex;">
                <a-dropdown>
                    <a-button>文章分类</a-button>
                    <template #content>
                        <a-doption v-for="(item, idx) in items" :key="item" @click="doptionClick(item, idx)">{{ item.name
                        }}</a-doption>
                    </template>
                </a-dropdown>
                <div style="width: 55%;"></div>
                <a-typography-text>当前分类: </a-typography-text>
                <div style="width: 5%"></div>
                <a-typography-text>{{ defaultCategory }}</a-typography-text>
            </div>

            <div style="margin: 20px;"></div>
            <a-textarea v-model="form.content" placeholder="请输入文章正文" :style="{ minHeight: '360px' }" :auto-size="true"
                :max-length="1800" :show-word-limit="true" />

            <div style="margin-top: 20px;"></div>
            <div style="margin: auto;">
                <a-button :style="{ width: '320px' }" @click="submit()" type="primary">发布文章</a-button>
            </div>

        </a-form>
    </div>
</template>
  
<script>
import { reactive } from 'vue';
import { ref } from 'vue';
import http from '../../main';
import { Message } from '@arco-design/web-vue';
import jwt_decode from 'jwt-decode';
import router from '@/router';


export default {
    data() {
        return {
            // 这里要和数据库对上。做个哈希获得ID
            items: [
                { name: "教务信息" }, { name: "乡情校谊" },
                { name: "电脑网络" }, { name: "休闲娱乐" },
                { name: "三角地带" }, { name: "二手市场" },
            ]
        }
    },
    setup() {
        let defaultCategory = ref('');
        defaultCategory.value = "乡情校谊";

        const form = reactive({
            title: "",
            content: "",
            categoryId: 2,
        })

        // 下拉菜单事件
        // 传入索引方便哈希
        const doptionClick = (item, idx) => {
            defaultCategory.value = item.name;
            form.categoryId = idx + 1;  // 笑死，这里不加1外键直接爆炸
            console.log(idx + 1)
        }

        const user_obj = jwt_decode(localStorage.getItem('token'));
        console.log(user_obj.data.id)
        // 上传文章
        const submit = () => {
            let token = localStorage.getItem('token');
            console.log("token:  " + token)
            console.log(defaultCategory.value)
            let authorization_text = "Bearer " + token;
            console.log(authorization_text)

            let turl = '/articles/auth/create'
            const config = {
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': authorization_text
                },
            }

            const data = {
                "articleCategory": form.categoryId,
                "authorId": user_obj.data.id,
                "content": form.content,
                "down": 0,
                "stars": 0,
                "title": form.title,
                "up": 0
            }

            if (!form.content || !form.title) {
                Message.error("请提交合法内容")
                return;
            }
            http.post(turl, data, config)
                .then(resp => {
                    console.log(resp)
                    Message.success({
                        content: "发帖成功",
                        closable: true
                    })
                    router.push('/post/index');
                })
                .catch(err => { console.log(err) })
        }

        return {
            submit, form, defaultCategory, doptionClick
        };
    },
};
</script>